*{
    margin: 0;
    padding: 0;
}
*::before, *::after{
    box-sizing: border-box;

}
body{
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #fff;
    overflow: hidden;
}
#container{
    position: relative;
    /* transform: scale(0.725); */
}
.loading-text{
   position: relative;
   font-size: 3.75rem;
   font-weight: 300;
   white-space: nowrap;
   
}
.loading-text::before{
    content: '';
    position: absolute;
    top: 40px;
    left: 115px;
    width: 6px;
    height: 6px;
    background-color: black;
    border-radius: 50%;
    animation: domove 1800ms cubic-bezier(0.25,0.25,0.75,0.75) infinite
}
@keyframes domove{
    0%,100%{
        transform: rotate(180deg) translate(-100px,-10px) rotate(-180deg)
    }
    50%{
        transform: rotate(0deg) translate(-111px,-10px) rotate(0deg)
    }
}
.letter{
    display: inline-block;
    position: relative;
    color: #000000;
    letter-spacing: 1px;

}
.letter:nth-child(1)
{
    transform: scale(1,1.275);
    transform-origin: 100% 70%;

}
.letter:nth-child(1)::before{
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 14px;
    height: 36px;
    background-color: #fff;
    transform-origin: 100% 0;
    animation: linestretch 1800ms cubic-bezier(0.25,0.25,0.75,0.75) infinite

}
@keyframes linestretch{
    0%,45%,70%,100%{
        transform:scaleY(0.125)
    }
    49%{
        transform:scaleY(0.75)
    }
    50%{
        transform:scaleY(0.85)
    }
    53%{
        transform:scaleY(0.5)
    }
    60%{
        transform:scaleY(0)
    }
    68%{
        transform:scaleY(0.18)
    }

}
.letter:nth-child(5){
    transform-origin: 100% 70%;
   animation: letterstretch 1800ms cubic-bezier(0.25,0.23,0.73,0.75) infinite
}
@keyframes letterstretch{
    0%,100%{
        transform:scale(1,0.35);
        transform-origin: 100% 75%;

    }
    0%{
        transform:scale(1,2.125);
        transform-origin: 100% 67%;
    }
    37%{
        transform:scale(1,0.85);
        transform-origin:100% 75%;
    }
    46%{
        transform:scale(1,1.03);
        transform-origin:100% 75%;
    }
    50%,97%{
        transform:scale(1);
        transform-origin:100% 75%;
    }
}
.letter:nth-child(5)::before{
    content: '';
    position: absolute;
    top: 16px;
    left: 2px;
    width: 9px;
    height: 15px;
    background-color: #fff;
    
}